<template>
  <div class="app-container">
    <el-main>
      <el-divider content-position="left" style="margin: 40px 0;">
        <h3>参数设置</h3>
      </el-divider>
      <el-form v-loading="loading" ref="cuForm" label-width="160px" style="width: 500px;">
        <el-form-item class="own-form-item" :label="item.name" v-for="(item,index) in configList" :key="index">
          <div class="own-item-input own-upload-box" v-if="item.input_type==='image'">
            <el-upload :class="item.hasEdit?'avatar-uploader':'avatar-uploader disabled'"
                       :disabled="item.hasEdit?false:true" :action="upFileUrl" :show-file-list="false"
                       :on-success="function (res, file) { return handleSuccess(res, file, item)}" accept="image/*"
                       :before-upload="beforeUpload"
            >
              <img v-if="item.params" :src="item.params" class="avatar"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="flex-grow" style="display:flex;align-items:flex-end;margin-left: 15px;">
              <div style="line-height: 16px;font-size: 12px;">
                <p>图片不大于1MB</p>
                <p>建议尺寸200px*200px</p>
                <p>推荐图片类型PNG</p>
              </div>
            </div>
          </div>

          <el-input v-else v-model="item.params" placeholder="请填写参数" class="own-item-input"
                    :disabled="item.disabled" :show-password="item.input_type==='password'?true:false"
          >
            <template slot="append" v-if="item.unit">{{ item.unit }}</template>
          </el-input>
          <el-button type="text" @click.native="editConfig(item,index)">
            {{ item.hasEdit ? '保存' : '修改' }}
          </el-button>
        </el-form-item>
      </el-form>

      <el-card shadow="never" class="margin-lr-lg">
        <div slot="header">
          <span>信息级别</span>
        </div>
        <table class="mailTable" v-loading="tableLoading">
          <tr class="firstTr header">
            <td class="firstTd" style="color: #909399;width: 15%">信息名称</td>
            <td style="color: #909399;width: 10%">级别</td>
            <td style="text-align: left;width: 25%">
              <el-tooltip class="item" effect="dark" content="角色便于新用户默认配置,以实际适用用户为准"
                          placement="top"
              >
        								<span><span class="text-orange">适用角色</span><i
                          class="el-icon-warning-outline"
                        ></i></span>
              </el-tooltip>
            </td>
            <td style="text-align: left;width: 25%">
              <el-tooltip class="item" effect="dark" content="" placement="top">
                <div slot="content">
                  一个用户有多个级别时,默认显示最上级<br/>
                  1、绿色：来源“角色关联”<br/>
                  2、蓝色：来源“添加用户”
                </div>
                <span><span class="text-red">实际适用用户</span><i class="el-icon-warning-outline"></i></span>
              </el-tooltip>
            </td>
            <td style="text-align: left;width: 25%">
              <el-tooltip class="item" effect="dark" content="" placement="top">
                <div slot="content">
                  无级别用户添加的信息，默认为最低级别
                </div>
                <span><span style="color:#909399;">无级别的用户</span><i class="el-icon-warning-outline"></i></span>
              </el-tooltip>
            </td>
          </tr>
          <template v-if="tableDataInfoLevel && tableDataInfoLevel.length" v-for="item in tableDataInfoLevel">
            <tr v-if="item.levelVOList && item.levelVOList.length" v-for="(level,i) in item.levelVOList">
              <td v-if="i === 0" class="firstTd" :rowspan="item.levelVOList.length">{{ item.name }}
                <div style="float: right">
                  <el-tooltip effect="dark" content="添加级别" placement="top">
                    <i class="el-icon-circle-plus-outline" style="font-size: 20px;color: #409EFF"
                       @click="addLevelDialogVisible = true;addLevelForm.code = item.code"
                    ></i>
                  </el-tooltip>
                </div>
              </td>
              <td>{{ '第' + (level.level) + '级' }}
                <!--                <div style="float: right">-->
                <!--                  <el-tooltip effect="dark" content="删除等级" placement="top">-->
                <!--                    <i class="el-icon-delete" style="font-size: 14px;color: #F56C6C"-->
                <!--                       @click="removeLevel(item.code,level.level)"-->
                <!--                    ></i>-->
                <!--                  </el-tooltip>-->
                <!--                </div>-->
              </td>
              <td style="text-align: left">
                <el-tag class="margin-lr-xs margin-tb-xs" closable effect="plain" type="success"
                        v-for="(role,t) in level.roleLevelVOList" :key="t"
                        @close="removeLevelRoleOrUser(item.code,level.level,role.id,1)"
                >{{ role.role_name }}
                </el-tag>
                <el-button class="margin-lr-xs margin-tb-xs" size="small"
                           @click="showAddLevelRoleDialog(item.code,level.level)"
                >+ 角色
                </el-button>
              </td>
              <td style="text-align: left">
                <el-tag class="margin-lr-xs margin-tb-xs" v-for="(user,t) in level.userLevelVOList" :key="t"
                        :closable="user.can_remove" effect="plain" :type="user.can_remove?'primary':'success'"
                        @close="removeLevelRoleOrUser(item.code,level.level,user.id,2)"
                >{{ user.user_name }}
                </el-tag>
                <el-button class="margin-lr-xs margin-tb-xs" size="small"
                           @click="showAddLevelUserDialog(item.code,level.level)"
                >+ 用户
                </el-button>
              </td>
              <td v-if="i === 0" :rowspan="item.levelVOList.length" style="text-align: left">
                <el-tag class="margin-lr-xs margin-tb-xs" v-for="(user,t) in item.noLevelUserList" :key="t"
                        effect="plain" type="info"
                >{{ user.user_name }}
                </el-tag>
              </td>
            </tr>
            <tr v-if="!item.levelVOList || (item.levelVOList && item.levelVOList.length===0)">
              <td class="firstTd">{{ item.name }}
                <div style="float: right">
                  <el-tooltip effect="dark" content="添加级别" placement="top">
                    <i class="el-icon-circle-plus-outline" style="font-size: 20px;color: #409EFF"
                       @click="addLevelDialogVisible = true;addLevelForm.code = item.code"
                    ></i>
                  </el-tooltip>
                </div>
              </td>
              <td colspan="3">
                暂无级别
              </td>
              <td style="text-align: left">
                <el-tag class="margin-lr-xs margin-tb-xs" v-for="(user,t) in item.noLevelUserList" :key="t"
                        effect="plain" type="info"
                >{{ user.user_name }}
                </el-tag>
              </td>
            </tr>
          </template>
          <tr v-if="!tableDataInfoLevel || (tableDataInfoLevel&&tableDataInfoLevel.length===0)">
            <td class="firstTd" colspan="3">暂无数据</td>
          </tr>
        </table>
      </el-card>

      <el-card shadow="never" class="margin-lr-lg margin-tb-lg">
        <div slot="header">
          <span>档位管理</span>
          <el-button style="margin-left: 10px" type="primary" size="mini" @click="showGearDialog()">新增档位</el-button>
        </div>
        <table v-loading="gearTableLoading" class="mailTable">
          <tr class="firstTr header">
            <td style="width: 25%" class="firstTd">档位</td>
            <td style="width: 25%">成交折扣</td>
            <td style="width: 20%">维护比例</td>
            <td style="width: 20%">个人提成比例</td>
            <td style="width: 10%">操作</td>
          </tr>
          <tr v-for="(item,index) in gearList" :key="index">
            <td class="firstTd">{{ item.gear }}档</td>
            <td>低于{{ item.transaction_discount }}折</td>
            <td>{{ item.maintenance_proportion }}%</td>
            <td>{{ item.personal_proportion }}%</td>
            <td>
              <el-button type="primary" icon="el-icon-edit" circle @click="showGearDialog(item)"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle @click="removeGear(item.id)"></el-button>
            </td>
          </tr>
          <tr v-if="!gearList || gearList.length===0">
            <td class="firstTd" colspan="5">暂无数据</td>
          </tr>
        </table>
      </el-card>

      <!--合同提醒表格-->
      <el-card shadow="never" class="margin-lr-lg margin-tb-lg">
        <div slot="header">
          <span>合同提醒</span>
        </div>
        <table v-loading="reminderTableLoading" class="mailTable">
          <tr class="firstTr header">
            <td style="width: 20%" class="firstTd">提醒名称</td>
            <td style="width: 5%">类型</td>
            <td style="width: 5%">天数</td>
            <td style="width: 10%">频率</td>
            <td style="width: 5%">执行百分比</td>
            <td style="width: 5%">状态</td>
            <td style="width: 35%">规则</td>
            <td style="width: 5%">操作</td>
          </tr>
          <tr v-for="(config,index) in reminderTableData" :key="index">
            <td class="firstTd">{{ config.name }}</td>
            <td>{{ config.type === 1 ? '前置提醒' : '后置提醒' }}</td>
            <td>{{ config.day }}天</td>
            <td>{{ config.frequency }}天/一次</td>
            <td>{{ config.execution_percentage ? config.execution_percentage + '%' : '' }}</td>
            <td>
              <el-switch v-model="config.status" @change="(val)=>{statusChange(val,config)}">
              </el-switch>
            </td>
            <td>
              <span v-if="!config.execution_percentage">
                {{
                  config.field_name + (config.type === 1 ? '前' : '后') + (config.day + '天发起提醒，') + ('每' + config.frequency + '天提醒一次')
                }}</span>
              <span v-else>
                {{
                  '对' + config.field_name + (config.type === 1 ? '前' : '后') + (config.day + '天' + ('且执行金额未满' + config.execution_percentage + '%') + '发起提醒，') + ('每' + config.frequency + '天提醒一次')
                }}</span>
            </td>
            <td>
              <el-button type="primary" icon="el-icon-edit" circle @click="showReminderConfigDialog(config)"
              ></el-button>
            </td>
          </tr>
          <tr v-if="!reminderTableData || reminderTableData.length===0">
            <td class="firstTd" colspan="5">暂无数据</td>
          </tr>
        </table>
      </el-card>
    </el-main>

    <!--添加用户-->
    <el-dialog :title="'为'+level+'级添加用户'" :visible.sync="addLevelUserDialogVisible" width="400px" center
               @close="closeAddLevelUserDialog" @open="initAddLevelUserList"
    >
      <el-form ref="addLevelUserForm" :model="addLevelUserForm" :rules="addLevelUserFormRules" label-width="80px"
               size="mini"
      >
        <el-form-item v-loading="addUserFormItemLoading" label="用户" prop="user_list">
          <el-select style="width: 100%" v-model="addLevelUserForm.user_list" multiple filterable
                     placeholder="请选择用户"
          >
            <el-option-group
              v-for="group in addLevelUserList"
              :key="group.level"
              :label="group.level"
            >
              <el-option
                v-for="user in group.userList"
                :key="user.id"
                :label="user.name"
                :value="user.id"
              >
                <span style="float: left">{{ user.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 12px">{{ group.level }}</span>
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addLevelUserDialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addLevelUser">确 定</el-button>
      </span>
    </el-dialog>

    <!--添加角色-->
    <el-dialog :title="'为'+level+'级添加角色'" :visible.sync="addLevelRoleDialogVisible" width="400px" center
               @close="closeAddLevelRoleDialog" @open="initRoleList"
    >
      <el-form ref="addLevelRoleForm" :model="addLevelRoleForm" :rules="addLevelRoleFormRules" label-width="80px"
               size="mini"
      >
        <el-form-item v-loading="roleFormItemLoading" label="角色" prop="role_list">
          <el-select v-model="addLevelRoleForm.role_list" multiple filterable placeholder="请选择角色">
            <el-option v-for="role in roleArr" :value="role.id" :label="role.name" :key="role.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addLevelRoleDialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addLevelRole">确 定</el-button>
      </span>
    </el-dialog>

    <!--添加等级-->
    <el-dialog title="添加等级" :visible.sync="addLevelDialogVisible" width="400px" center
               @close="closeAddLevelDialog"
    >
      <el-form ref="addLevelForm" :model="addLevelForm" :rules="addLevelRoleFormRules" label-width="80px"
               size="mini"
      >
        <el-form-item label="角色" prop="role_list">
          <el-select v-model="addLevelForm.role_list" multiple filterable placeholder="请选择角色">
            <el-option v-for="role in allRoleList" :value="role.id" :label="role.name" :key="role.id"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="用户" prop="user_list">
          <el-select v-model="addLevelForm.user_list" multiple filterable placeholder="请选择用户">
            <el-option v-for="user in userArr" :value="user.id" :label="user.name" :key="user.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addLevelDialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="addLevel">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="(edit?'编辑':'添加')+'档位'" :visible.sync="gearDialogVisible" width="500px" center
               @close="closeGearDialog"
    >
      <el-form ref="gearForm" label-width="100px" :model="gear"
               :rules="gearRules"
      >
        <el-form-item label="档位值" prop="gear">
          <el-input v-model="gear.gear" :readonly="edit" type="number" step="0.01" placeholder="请输入档位值"/>
        </el-form-item>
        <el-form-item label="成交折扣" prop="transaction_discount">
          <el-input v-model="gear.transaction_discount" type="number" step="0.01" placeholder="请输入成交折扣">
            <template slot="append">折</template>
            <template slot="prepend">低于</template>
          </el-input>
        </el-form-item>
        <el-form-item label="维护比例" prop="maintenance_proportion">
          <el-input v-model="gear.maintenance_proportion" type="number" step="0.01" placeholder="请输入维护比例">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="个人提成" prop="personal_proportion">
          <el-input v-model="gear.personal_proportion" type="number" step="0.01" placeholder="请输入个人提成">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="gearDialogVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="saveGear">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="'编辑'+(reminderConfig.name?reminderConfig.name:'')+'提醒'"
               :visible.sync="reminderConfigDialogVisible" width="500px"
               center
               @close="closeReminderConfigDialog"
    >
      <el-form ref="reminderConfigForm" label-width="100px" :model="reminderConfig"
               :rules="reminderConfigRules"
      >
        <el-form-item label="天数" prop="day">
          <el-input v-model="reminderConfig.day" type="number" step="1" placeholder="请输入天数">
            <template slot="append">天</template>
            <template slot="prepend">
              {{
                reminderConfig.field_name + (reminderConfig.type === 1 ? '前' : '后')
              }}
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="频率" prop="frequency">
          <el-input v-model="reminderConfig.frequency" type="number" step="1" placeholder="请输入频率">
            <template slot="append">天/一次</template>
            <template slot="prepend">每</template>
          </el-input>
        </el-form-item>
        <el-form-item v-if="reminderConfig.execution_percentage" label="执行百分比" prop="execution_percentage">
          <el-input v-model="reminderConfig.execution_percentage" type="number" step="1" placeholder="请输入执行百分比">
            <template slot="append">%</template>
            <template slot="prepend">未满</template>
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="reminderConfigDialogVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="saveReminderConfig">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  config_active_list,
  config_edit
} from '@/api/business/setting/dict'
import {
  Message
} from 'element-ui'
import {
  upFileUrl
} from '@/api/others'
import {
  addLevel,
  addLevelRole,
  addLevelUser,
  list, queryLevelUserVO,
  queryRoleByLevel,
  removeLevelRole,
  removeLevelUser
} from '@/api/business/dataLevel'
import { allList, role_list } from '@/api/system/user'
import { save, list as gearList, remove, edit } from '@/api/gear'
import { list as reminderConfigList, edit as editReminderConfig } from '@/api/reminderConfig'

const reg_mobile = /^1(3|4|5|6|7|8|9)\d{9}$/,
  reg_email =
    /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/
export default {
  components: {},
  data() {
    var validateMobile = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!reg_mobile.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }

    var validateEmail = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!reg_email.test(value)) {
        callback(new Error('请输入正确的邮箱'))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      configList: [],
      upFileUrl,
      loading2: false,
      canEditCompanyInfo: false,
      companyInfoForm: {
        id: null,
        name: '',
        company_desc: '',
        email: '',
        mobile: '',
        other: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入公司名称',
          trigger: 'blur'
        }],
        company_desc: [{
          required: true,
          message: '请输入公司简介',
          trigger: 'blur'
        }],
        mobile: [{
          required: false,
          validator: validateMobile,
          trigger: 'blur'
        }],
        email: [{
          required: false,
          validator: validateEmail,
          trigger: 'blur'
        }]
      },
      tableDataInfoLevel: [],
      userArr: [],
      addLevelUserDialogVisible: false,
      addLevelUserForm: {
        code: null,
        level: null,
        user_list: []
      },
      addLevelUserFormRules: {
        user_list: [
          { type: 'array', required: true, message: '人员不能为空', trigger: 'change' }
        ]
      },
      roleArr: [],
      addLevelRoleDialogVisible: false,
      addLevelRoleForm: {
        code: null,
        level: null,
        role_list: []
      },
      addLevelRoleFormRules: {
        role_list: [
          { type: 'array', required: true, message: '角色不能为空', trigger: 'change' }
        ]
      },
      roleFormItemLoading: false,
      addLevelDialogVisible: false,
      addLevelForm: {
        code: null,
        role_list: [],
        user_list: []
      },
      allRoleList: [],
      tableLoading: false,
      level: null,
      addLevelUserList: [],
      addUserFormItemLoading: false,
      gearList: [],
      gearTableLoading: false,
      gear: {
        gear: null, // 档位
        transaction_discount: null, // 成交折扣
        maintenance_proportion: null, // 维护比例
        personal_proportion: null // 个人提成比例
      },
      gearDialogVisible: false,
      gearRules: {
        gear: [
          { required: true, message: '档位值不能为空', trigger: 'blur' }
        ],
        transaction_discount: [
          { required: true, message: '成交折扣不能为空', trigger: 'blur' }
        ],
        maintenance_proportion: [
          { required: true, message: '维护比例不能为空', trigger: 'blur' }
        ],
        personal_proportion: [
          { required: true, message: '个人提成比例不能为空', trigger: 'blur' }
        ]
      },
      edit: false,
      reminderTableLoading: false,
      reminderTableData: [],
      reminderConfig: {
        name: null, // 提醒类型名称
        type: null, // 1:时间前置提醒  2：时间后置提醒
        day: null, // 时间
        frequency: null, // 多少天提醒一次
        execution_percentage: null, // 执行百分比
        status: null, // 0:禁用 1:启用
        field_name: ''
      },
      reminderConfigDialogVisible: false,
      reminderConfigRules: {
        name: [
          { required: true, message: '提醒类型名称不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '提醒类型不能为空', trigger: 'change' }
        ],
        day: [
          { required: true, message: '提醒前后置时间不能为空', trigger: 'blur' }
        ],
        frequency: [
          { required: true, message: '提醒频率不能为空', trigger: 'blur' }
        ],
        execution_percentage: [
          { required: true, message: '执行百分比不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择是否启用', trigger: 'change' }
        ]
      }
    }
  },
  computed: {},
  created() {
    this.getList()
    this.getTableData()
    this.initUserList()
    this.initAllRoleList()
    this.initGearList()
    this.getReminderConfigTableData()
  },
  mounted: function() {
  },
  methods: {
    getList() {
      this.loading = true
      return config_active_list()
        .then(res => {
          let {
            data
          } = res
          var configList = []
          for (var i in data) {
            var o = data[i]
            o.disabled = true
            o.hasEdit = false
            configList.push(o)
          }
          this.configList = configList
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },

    editConfig(item, index) {
      if (item.hasEdit) {
        var obj = Object.assign({}, item)
        if (!obj.params) {
          this.$message.error('请填写参数')
          return false
        }
        this.loading = true
        return config_edit(obj)
          .then(res => {
            const {
              code,
              message
            } = res
            if (code === 200) {
              Message({
                message,
                type: 'success',
                duration: 1000
              })
              this.getList()
            }
            this.loading = false
            item.disabled = true
            item.hasEdit = false
          })
          .catch(() => {
            this.loading = false
          })
      } else {
        item.disabled = false
        item.hasEdit = true
      }
    },
    // 图片上传成功回调方法
    beforeUpload(file) {
      const isLtSize = file.size / 1024 / 1024 <= 1
      if (!isLtSize) {
        Message.error('上传文件不能超过 1MB!')
      }
      return isLtSize
    },
    // 图片上传成功回调方法
    handleSuccess(res, file, item) {
      const _this = this
      if (res.code === 200) {
        item.params = res.data
        _this.$forceUpdate()
        _this.$emit('upload-success', res.data)
      } else {
        Message.error({
          message: res.message,
          duration: 5000
        })
      }
    },
    getTableData() {
      this.tableLoading = true
      list().then(res => {
        this.tableDataInfoLevel = res.data
        this.tableLoading = false
      })
    },
    initUserList() {
      allList().then(res => {
        this.userArr = res.data.filter(item => item.status === 1)
      })
    },
    showAddLevelUserDialog(code, level) {
      this.addLevelUserForm.code = code
      this.addLevelUserForm.level = level
      this.level = level
      this.addLevelUserDialogVisible = true
    },
    showAddLevelRoleDialog(code, level) {
      this.addLevelRoleForm.code = code
      this.addLevelRoleForm.level = level
      this.level = level
      this.addLevelRoleDialogVisible = true
    },
    closeAddLevelUserDialog() {
      this.addLevelUserForm = {
        code: null,
        level: null,
        user_list: []
      }
      this.level = null
      this.addLevelUserList = []
      this.$nextTick(() => {
        this.$refs.addLevelUserForm.clearValidate()
      })
    },
    closeAddLevelRoleDialog() {
      this.addLevelRoleForm = {
        code: null,
        level: null,
        user_list: []
      }
      this.level = null
      this.roleArr = []
      this.$nextTick(() => {
        this.$refs.addLevelRoleForm.clearValidate()
      })
    },
    addLevelUser() {
      this.$refs.addLevelUserForm.validate(flag => {
        if (flag) {
          const loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          addLevelUser(this.addLevelUserForm).then(res => {
            this.$message.success('添加成功')
            this.getTableData()
            this.addLevelUserDialogVisible = false
            loading.close()
          }).catch(() => {
            loading.close()
          })
        }
      })
    },
    addLevelRole() {
      this.$refs.addLevelRoleForm.validate(flag => {
        if (flag) {
          const loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          addLevelRole(this.addLevelRoleForm).then(res => {
            this.$message.success('添加成功')
            this.getTableData()
            this.addLevelRoleDialogVisible = false
            loading.close()
          }).catch(() => {
            loading.close()
          })
        }
      })
    },
    initRoleList() {
      this.roleFormItemLoading = true
      queryRoleByLevel({
        code: this.addLevelRoleForm.code,
        level: this.addLevelRoleForm.level
      }).then(res => {
        this.roleArr = res.data
        this.roleFormItemLoading = false
      })
    },
    removeLevelRoleOrUser(code, level, id, type) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const req = {
          code,
          level,
          id
        }
        const loading = this.$loading({
          lock: true,
          text: '提交中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        if (type === 1) {
          removeLevelRole(req).then(res => {
            this.$message.success('操作成功')
            this.getTableData()
            loading.close()
          }).catch(() => {
            loading.close()
          })
        } else {
          removeLevelUser(req).then(res => {
            this.$message.success('操作成功')
            this.getTableData()
            loading.close()
          }).catch(() => {
            loading.close()
          })
        }
      }).catch(() => {

      })
    },
    closeAddLevelDialog() {
      this.addLevelForm = {
        code: null,
        role_list: [],
        user_list: []
      }
      this.$nextTick(() => {
        this.$refs.addLevelForm.clearValidate()
      })
    },
    initAllRoleList() {
      role_list().then(res => {
        this.allRoleList = res.data.filter(item => item.status === 1)
      })
    },
    addLevel() {
      this.$refs.addLevelForm.validate(flag => {
        if (flag) {
          const loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          addLevel(this.addLevelForm).then(res => {
            this.$message.success('添加成功')
            this.getTableData()
            this.addLevelDialogVisible = false
            loading.close()
          }).catch(() => {
            loading.close()
          })
        }
      })
    },
    initAddLevelUserList() {
      this.addUserFormItemLoading = true
      queryLevelUserVO({ code: this.addLevelUserForm.code }).then(res => {
        this.addLevelUserList = res.data
        this.addUserFormItemLoading = false
      })
    },
    saveGear() {
      this.$refs.gearForm.validate(flag => {
        if (flag) {
          const loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          if (this.edit) {
            edit(this.gear).then(res => {
              this.gearDialogVisible = false
              loading.close()
              this.initGearList()
            }).catch(() => {
              loading.close()
            })
          } else {
            save(this.gear).then(res => {
              loading.close()
              this.gearDialogVisible = false
              this.initGearList()
            }).catch(() => {
              loading.close()
            })
          }
        }
      })
    },
    closeGearDialog() {
      this.edit = false
      this.gear = {
        gear: null, // 档位
        transaction_discount: null, // 成交折扣
        maintenance_proportion: null, // 维护比例
        personal_proportion: null // 个人提成比例
      }
      this.$nextTick(() => {
        this.$refs.gearForm.clearValidate()
      })
    },
    initGearList() {
      this.gearTableLoading = true
      gearList().then(res => {
        this.gearTableLoading = false
        this.gearList = res.data
      }).catch(() => {
        this.gearTableLoading = false
        this.gearList = []
      })
    },
    showGearDialog(gear) {
      if (gear !== undefined) {
        this.edit = true
        this.gear = Object.assign({}, gear)
      }
      this.gearDialogVisible = true
    },
    removeGear(id) {
      this.$confirm('确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '删除中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        remove({ id }).then(res => {
          this.$message.success('操作成功')
          this.initGearList()
          loading.close()
        }).catch(() => {
          loading.close()
        })
      }).catch(() => {

      })
    },
    showReminderConfigDialog(config) {
      this.reminderConfigDialogVisible = true
      this.reminderConfig = Object.assign({}, config)
    },
    getReminderConfigTableData() {
      this.reminderTableLoading = true
      reminderConfigList().then(res => {
        this.reminderTableData = res.data
        this.reminderTableLoading = false
      }).catch(() => {
        this.reminderTableLoading = false
        this.reminderTableData = []
      })
    },
    closeReminderConfigDialog() {
      this.reminderConfig = {
        name: null, // 提醒类型名称
        type: null, // 1:时间前置提醒  2：时间后置提醒
        day: null, // 时间
        frequency: null, // 多少天提醒一次
        execution_percentage: null, // 执行百分比
        status: null, // 0:禁用 1:启用
        field_name: ''
      }
    },
    saveReminderConfig() {
      this.$refs.reminderConfigForm.validate(flag => {
        const loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        editReminderConfig(this.reminderConfig).then(res => {
          this.$message.success('操作成功')
          loading.close()
          this.reminderConfigDialogVisible = false
          this.getReminderConfigTableData()
        }).catch(() => {
          loading.close()
        })
      })
    },
    statusChange(val, config) {
      this.$confirm('确定' + (val ? '启用' : '禁用') + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        editReminderConfig({
          id: config.id,
          status: val
        }).then(res => {
          this.$message.success('操作成功')
        }).catch(() => {
          config.status = !val
        })
      }).catch(() => {
        config.status = !val
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-block {
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: .2s;
  padding: 24px 24px 24px 0;
  width: 50%;
}

/deep/ .el-form-item__content {
  display: flex;

  .own-item-input {
    width: 250px;
    margin-right: 15px;
  }
}

.own-upload-box {
  display: flex;
  height: 102px;

  .preview-btn-box {
    margin: 0 5px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
  }

  & > > > .avatar-uploader {
    &.disabled {
      background-color: #F5F7FA;
      border-radius: 6px;
    }

    & > > > .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    & > > > .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px !important;
      height: 100px !important;
      line-height: 100px !important;
      text-align: center;
    }

    .avatar {
      width: 100px !important;
      height: 100px !important;
      display: block;
      object-fit: contain;
    }
  }
}

.mailTable {
  width: 100%;
  font-size: 12px;
  margin: 0 auto 10px auto;
  border-collapse: collapse;
}

.mailTable tr td {
  padding: 10px;
  line-height: 23px;
  box-sizing: border-box;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  text-align: center;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.header {
  font-weight: 700;
}
</style>
